<template>
  <div>
    <p>姓：<input v-model="firstName" /></p>
    <p>名：<input v-model="lastName" /></p>
    <p>{{ fullName }}</p>
    <button @click="changeFullName">更改fullName</button>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
let firstName = ref("");
let lastName = ref("");
// let fullName = computed(() => {
//   return (
//     firstName.value.slice(0, 1).toUpperCase() +
//     firstName.value.slice(1) +
//     "-" +
//     lastName.value
//   );
// });
// console.log(fullName); //ComputedRefImpl
// console.log("返回值" + fullName.value);

//computed value is readonly;computed的返回值是只读的，如果想变成可读可写如何修改呢？
function changeFullName() {
  fullName.value = "li*si"; //[Vue warn] Write operation failed: computed value is readonly
}
//如果想变成可读可写如何修改呢？
let fullName = computed({
  get() {
    return (
      firstName.value.slice(0, 1).toUpperCase() +
      firstName.value.slice(1) +
      "-" +
      lastName.value
    );
  },
  set(val) {
    //这边有set方法，会传递修改后的val,这时候拿到修改后的值，然后进行修改
    console.log(val);
    const [fir, last] = val.split("*");
    firstName.value = fir;
    lastName.value = last;
  },
});
</script>

<style scoped></style>
